<template>
    <div class="nav">
        <h2>留言板</h2>
        <p>沟通交流,拉近你我</p>
        <Editor ref="content"/>
        <button @click="submsg">提交留言</button>
    </div>
</template>

<script>
import {mapGetters} from "vuex"
import Editor from "../../editor/index"
export default {
  data(){
    return {
      msg:""
    }
  },
  components:{
    Editor
  },
  computed:{
    ...mapGetters(["userName"])
  },
  methods:{
    submsg(){
      this.msg=this.$refs.content.msg
      if(this.msg==""){
        this.$message({
          showClose: true,
          message: '不能为空哦',
          type: 'error'
        });
      }else{
          let data={
          msg:this.msg,
          userName:this.userName
        }
        console.log(this.userName)
        this.$axios.post("/message",data)
          .then(res=>{
            let code=res.data.code
             if(code===200){
                this.$message({
                showClose: true,
                message: '发表成功',
                type: 'success'
              });
              setTimeout(()=>{
                window.location.reload()
              },1000)
             }else if(code===500){
               this.$message({
                showClose: true,
                message: '服务器繁忙,请稍等~~',
                type: 'error'
              });
             }
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nav{
  box-sizing: border-box;
  padding:20px;
  text-align: center;
  background-color: white;
  h2{
    font-size:20px;
    font-weight: bold;
  }
  p{
    line-height: 60px;
  }
  textarea{ 
    
  }
  button{
    display: block;
    height: 38px;
    margin:40px 0;
    padding: 0 18px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition:.5s;
    &:hover{
      opacity: .7;
    }
  }
}
</style>